<template>
    <el-form label-width="100px">
        <el-form-item label="SPU名称">
            <el-input placeholder="SPU名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
            <el-select placeholder="请选择品牌" v-model="spuInfo.tmId">
                <el-option :label="trademark.tmName" :value="trademark.id" v-for="trademark in trademarkList"
                    :key="trademark.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="SPU描述">
            <el-input type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="SPU图片">
            <el-upload :action="`${BASE_URL}/admin/product/fileUpload`" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-select :placeholder="`还剩下${filterBaseSaleAttrList.length}个未选择`" v-model="spuInfo.spuSaleAttr">
                <el-option :label="baseSaleAttr.name" :value="`${baseSaleAttr.id}:${baseSaleAttr.name}`"
                    v-for="baseSaleAttr in filterBaseSaleAttrList" :key="baseSaleAttr.id" />
            </el-select>
            <el-button type="primary" :disabled="!spuInfo.spuSaleAttr" @click="toAddBaseSaleAttrList">添加销售属性</el-button>
        </el-form-item>
        <el-form-item>
            <el-table border :data="spuInfo.spuSaleAttrList">
                <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
                <el-table-column label="属性名" prop="saleAttrName"></el-table-column>
                <el-table-column label="属性值名称列表" prop="spuSaleAttrValueList">
                    <template v-slot="{ row }">
                        <el-tag :key="index" v-for="(tag, index) in row.spuSaleAttrValueList" closable
                            :disable-transitions="false" @close="handleClose(row, tag)">
                            {{ tag.saleAttrValueName }}
                        </el-tag>
                        <el-input class="input-new-tag" v-if="row.inputVisible" v-model="inputValue" ref="saveTagInput"
                            size="small" @keyup.enter.native="handleInputConfirm(row)" @blur="handleInputConfirm(row)">
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(row)">+ New Tag</el-button>
                    </template>

                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ $index }">
                        <el-popconfirm title="确定删除属性值吗" confirm-button-text="Yes" cancel-button-text="No"
                            @onConfirm="toDeleteBaseSaleAttr($index)">
                            <template #reference>
                                <div style="display: inline-block;margin-left: 10px">
                                    <el-button type="danger" size="small">删除属性</el-button>
                                </div>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">保存</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { reqGetAllTrademarkList, reqGetBaseSaleAttrList } from '@/api/product/spu'
export default {
    name: 'SpuForm',
    data() {
        return {
            dialogImageUrl: '', //展示的图片地址
            dialogVisible: false, //控制是否展示照片
            trademarkList: [],//品牌数据
            baseSaleAttrList: [], //销售属性数据
            spuInfo: {
                spuName: '',
                tmId: '', // spu品牌
                description: '', // spu描述
                spuImageList: [], // 存储spu图片的数组
                spuSaleAttrList: [], // 基本销售属性
                spuSaleAttr: '', // 收集选中的属性
                category3Id: '' // 三级id
            },
            BASE_URL: process.env.VUE_APP_BASE_API,
            dynamicTags: ['标签一', '标签二', '标签三'],
            // inputVisible: false,
            inputValue: ''
        }
    },
    methods: {
        handleRemove(file, fileList) {
            // console.log(fileList);
            //收集的数据中去除删除的图片数据
            this.spuInfo.spuImageList = fileList.map(item => {
                return {
                    imgName: item.name,
                    imgUrl: item.res
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //上传图片成功
        handleAvatarSuccess(res, file, fileList) {
            this.spuInfo.spuImageList.push({ imgName: file.name, imgUrl: res.data })
        },

        //点击添加销售属性
        toAddBaseSaleAttrList() {
            this.spuInfo.spuSaleAttrList.push({
                saleAttrName: this.spuInfo.spuSaleAttr.split(':')[1],
                spuSaleAttrValueList: [],
                inputVisible: false,
            })
            this.spuInfo.spuSaleAttr = ''
        },

        //点击删除销售属性
        toDeleteBaseSaleAttr(index) {
            // console.log(index)
            this.spuInfo.spuSaleAttrList.splice(index, 1)
        },

        handleClose(row, tag) {
            // console.log(row, tag)
            row.spuSaleAttrValueList.splice(row.spuSaleAttrValueList.indexOf(tag), 1)
        },

        showInput(row) {
            row.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm(row) {
            let inputValue = this.inputValue;
            if (inputValue) {
                row.spuSaleAttrValueList.push({
                    saleAttrName: row.saleAttrName,
                    saleAttrValueName: inputValue
                })
            }
            row.inputVisible = false;
            this.inputValue = '';
        }
    },


    //挂载完成时
    async mounted() {
        try {
            const [responseTrademarkList, responseBaseSaleAttrList] = await Promise.all([reqGetAllTrademarkList(), reqGetBaseSaleAttrList()])
            // console.log(responseTrademarkList, responseBaseSaleAttrList)
            this.trademarkList = responseTrademarkList.data
            this.baseSaleAttrList = responseBaseSaleAttrList.data
        } catch (error) { this.$message.error('获取数据品牌或销售属性数据失败') }

    },

    //计算属性
    computed: {
        filterBaseSaleAttrList() {
            return this.baseSaleAttrList.filter(baseSaleAttr => {
                return !this.spuInfo.spuSaleAttrList.find(item => baseSaleAttr.name === item.saleAttrName)
            })
        }
    }
}
</script>

<style>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>